var React = require('react');
import { Component } from 'react-native';



import {
    ScrollView,
    StyleSheet,
    Image,
    Text,
    View
} from 'react-native';

import {styles} from '../common/style';
import { HeadApp, MenuApp, TagMovie , LoadingView } from './HeadMenu';
import Icon from 'react-native-vector-icons/Foundation';


var Itemurl = "http://101.200.130.104/DotaVideoApi/?r=Youku/GetSokuList&data={q:'mv',cp:1,od:1,lt:0,limitdate:0}";

var HomeView = React.createClass({

    getInitialState: function(){
        return {
            itemMovie: null
        }
    },

    componentDidMount: function(){
        this.fetchData();
    },

    fetchData: function(){
        fetch(Itemurl)
            .then((response) => response.json())
            .then((response) => {
                var data = response.data
                this.setState({
                    itemMovie: data
                })
                console.log(data)

            })
    },


    ItemView: function(){
        return this.state.itemMovie.map(function(item, key){
            return (
                <View style={[styles.itemBox]} key={key}>
                    <Text style={[styles.ItemName]}>{item.name}</Text>
                    <Image style={[styles.Itempic]} source={{uri:item.pic}}/>
                    <View style={[styles.ItemIcon]}>
                        <View style={[styles.Row]}>
                            <Icon name="star" size={15} color="#e6577a" style={[styles.Icons]}/>
                            <Text style={[styles.textGray]}>{item.click_count}</Text>
                        </View>
                        <View style={[styles.Row]}>
                            <Icon name="crop" size={15} color="#00bdd4" style={[styles.Icons]}/>
                            <Text style={[styles.textGray]}>{item.duration}</Text>
                        </View>
                        <View style={[styles.Row]}>
                            <Icon name="clock" size={15} color="#e79a00" style={[styles.Icons]}/>
                            <Text style={[styles.textGray]}>{item.time}</Text>
                        </View>
                        <View style={[styles.Row, styles.Iconsright]}>
                            <Icon name="anchor" size={15} color="#727272"/>
                        </View>
                    </View>
                </View>

            )
        })
    },

    render: function(){
        if( !this.state.itemMovie ){
            return ( <LoadingView></LoadingView> )
        }

        return (
        <View style={[styles.content]}>

            <HeadApp></HeadApp>

            <View style={[styles.container]} >
                <ScrollView>
                    <TagMovie></TagMovie>
                    <View>
                        {
                            this.ItemView() || null
                        }
                    </View>

                </ScrollView>
            </View>

            <MenuApp></MenuApp>
        </View>

        )
    }

});






module.exports = {
    HomeView: HomeView
}